<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>实名认证</title>
    <link rel="stylesheet" href="../../css/ui.min.css"/>
    <link rel="stylesheet" href="../../css/iconfont.css"/>
    <link rel="stylesheet" href="../../css/style.css"/>
    <link rel="stylesheet" href="../../css/mui.min.css"/>
    <script src="../../js/jquery-2.1.4.js"></script>
</head>
<style type="text/css">
	body,html{
		background: #fff;
	}
</style>
<body ontouchstart>
<header class="ui-header">
	<a href="javascript:history.go(-1)" class="ui-icon hd-left">
		<span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="margin-top: 0.8rem;"></span>
	</a>
	<div class="ui-title">实名认证</div>
</header>
<div class="ui-content">
    <div class="cert-main">
    	<div class="ui-form">
    		<div class="ui-cell">
    			<div class="ui-cell_label">
    				真实姓名：
    			</div>
    			<div class="ui-cell__bd">
    				<input type="text" class="ui-input" placeholder="请输入真实姓名">
    			</div>
    		</div>
    		<div class="ui-cell">
    			<div class="ui-cell_label">
    				身份证号：
    			</div>
    			<div class="ui-cell__bd">
    				<input type="text" class="ui-input" placeholder="请输入身份证号码">
    			</div>
    		</div>
    		<div class="ui-cell">
                <div class="ui-cell__bd">
                    <div class="ui-uploader">
                        <div class="ui-uploader__hd">
                            <p class="ui-uploader__title">上传身份证照片：</p>
                        </div>
                        <div class="ui-uploader__bd">
                            <ul class="ui-uploader__files" id="uploaderFiles">
                            </ul>
                            <div class="ui-uploader__input-box">
                                <input id="uploaderInput" class="ui-uploader__input" type="file" accept="image/*" >
                            </div>
                            <div class="upload-tips">正面</div>
                        </div>
                        <div class="ui-uploader__bd">
                            <ul class="ui-uploader__files" id="uploaderFiles">
                            </ul>
                            <div class="ui-uploader__input-box">
                                <input id="uploaderInput" class="ui-uploader__input" type="file" accept="image/*" >
                            </div>
                            <div class="upload-tips">反面</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui-cell-button">
            	<button class="ui-btn ui-btn-submit">提交</button>
            </div>
            <script type="text/javascript">
			    $(function(){
			        var tmpl = '<li class="ui-uploader__file" style="background-image:url(#url#)"><div class="li-close"><span class="iconfont icon-close"></span></div></li>',
			            $uploaderInput = $(".ui-uploader__input"),
			            $uploaderFiles = $(".uploader__files")
			            ;

			        $uploaderInput.on("change", function(e){
			            var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
			            for (var i = 0, len = files.length; i < len; ++i) {
			                var file = files[i];

			                if (url) {
			                    src = url.createObjectURL(file);
			                } else {
			                    src = e.target.result;
			                }

			                $(this).parents('.ui-uploader__bd').find('.ui-uploader__files').append($(tmpl.replace('#url#', src)));
			            }
			            $(this).parents('.ui-uploader__bd').find('.ui-uploader__input-box').hide();
			        });
			        $(document).on("click", ".li-close", function(){
			            $(this).parents('.ui-uploader__file').remove();
			            $('.ui-uploader__input-box').show();
			        });
			    });
			</script>

    	</div>
    </div>
</div>
</body>
</html>